<template>
    <div class="img-preview">
        <div class="body">
            <div class="list row">
                <div
                    class="item"
                    :style="itemStyle"
                    v-for="(img, index) in images"
                    :key="index"
                    @click="showImagePreview(img, index)"
                >
                    <img :src="img" :style="imgStyle" />
                </div>
            </div>
        </div>

        <!-- 图片预览 -->
        <van-image-preview
            v-model="showPreview"
            :images="images"
            @change="onChange"
            :startPosition="startPosition"
            :showIndex="true"
            :showIndicators="true"
        >
            <!-- <template v-slot:index>第{{ index }}页</template> -->
        </van-image-preview>
    </div>
</template>

<script>
export default {
    props: {
        images: Array
    },
    data() {
        return {
            showPreview: false,
            startPosition: 0,
            index: 0
        };
    },

    computed: {
        itemStyle() {
            let length = this.images.length;

            if (length === 1) {
                return {
                    width: "auto",
                    height: "auto"
                    // maxWidth: "93vw",
                    // maxHeight: "70vw"
                };
            }

            if (length === 2 || length === 4) {
                return {
                    width: "46.5vw",
                    height: "46.5vw"
                };
            }

            if ([3, 5, 6, 7, 8, 9].indexOf(length) !== -1) {
                return {
                    width: "31vw",
                    height: "31vw"
                };
            }
        },

        imgStyle() {
            let length = this.images.length;
            if (length === 1) {
                return {
                    width: "auto",
                    maxWidth: "93vw",
                    maxHeight: "70vw"
                };
            }
        }
    },

    methods: {
        onChange() {
            return;
        },
        showImagePreview(img, index) {
            this.showPreview = true;
            this.startPosition = index;
        }
    }
};
</script>


<style lang="less" scoped>
.img-preview {
    .body {
        width: 100%;
        height: auto;
        margin: 0 auto;

        .list {
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-start;
            .item {
                flex: 0 0 auto;
                width: auto;
                height: auto;
                font-size: 0;
                max-width: 93vw;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    // display: block;
                    // min-width: 100%;
                    // min-height: 100%;
                }
            }
            .btn-add {
                img {
                    width: 106%;
                }
            }
        }
    }
}
</style>